import React, { useEffect, useState } from "react"
import { getImageUrl } from '../../utils/utils'
import './style.css'
// import Image from './images/dog.png'

function index() {
    // const head:String = require('./images/dog.png')
    // console.log('head', head)

    // const head = getImageUrl('./images/dog.png')
    // console.log(head)
    const [flag, setFlag] = useState(false)
    //ArrowUp38 ArrowDown40 ArrowLeft37 ArrowRight39 A65 B66
    const rightSequence = '38,38,40,40,37,39,37,39,66,65'
    let sequence: number[] = []
    window.addEventListener('keyup', (e) => {
        sequence.push(e.keyCode)
        const str1 = sequence.join()
        if(str1.indexOf(rightSequence) > -1){
            console.log('输入正确！')
            setFlag(true)
            setTimeout(()=>{
                setFlag(false)
                sequence=[]
            },8000)

        }
    })

    return (
        <>
            <h1>输入正确按键，即可获取revolve~</h1>
            {/* <img src={head} alt="#" /> */}
            <div className={flag ? 'imageOutRe' : 'imageOut'}>
                <img src='/dog.png' alt="#" />
            </div>

        </>
    )
}

export default index